<template>
  <div class="ybjc">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">患者1</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：533221194503112723</span
      >
      <span>填表人：肖汉琪</span>
    </p>
    <div class="box">
      <span>检查日期：</span>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="选择检查日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>医疗机构名称及医生签名：</span>
      <el-select
        filterable
        placeholder="请选择医疗机构名称及医生"
        size="small"
        style="width: 200px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        filterable
        placeholder="请选择医疗机构名称及医生签名"
        size="small"
        style="width: 200px; margin-left: 20px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">
      眼病筛查及视力评估
    </p>
    <div class="box">
      <span>总体情况：</span>
      <el-tag type="success" size="small" style="margin-left: 15px"
        >未见异常</el-tag
      >
      <el-tag type="info" size="small" style="margin-left: 15px">异常</el-tag>
      <el-tag type="danger" size="small" style="margin-left: 15px">异常</el-tag>
      <p style="color: rgb(250, 140, 22); margin-top: 10px">
        温馨提示:如您在进行下方眼外观检查发现了异常情况并进行了填写和有主要眼病高危因素时，总体情况将自动判定为异常。
      </p>
    </div>
    <p style="font-weight: 900; font-size: 14px; color: #000">眼外观</p>
    <div class="box">
      <span style="width: 20%; display: inline-block">眼睑：</span>
      <div style="width: 80%; display: inline-block">
        <span>右眼：</span>
        <el-checkbox-group
          v-model="info.眼睑右眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="眼睑有缺损" value="眼睑有缺损"></el-checkbox>
          <el-checkbox label="上睑下垂" value="上睑下垂"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.眼睑右眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
      <span style="width: 20%; display: inline-block"></span>
      <div style="width: 80%; display: inline-block; margin-top: 10px">
        <span>左眼：</span>
        <el-checkbox-group
          v-model="info.眼睑左眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="眼睑有缺损" value="眼睑有缺损"></el-checkbox>
          <el-checkbox label="上睑下垂" value="上睑下垂"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.眼睑左眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">结膜：</span>
      <div style="width: 80%; display: inline-block">
        <span>右眼：</span>
        <el-checkbox-group
          v-model="info.结膜右眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox
            label="眼部有脓性分泌物"
            value="眼部有脓性分泌物"
          ></el-checkbox>
          <el-checkbox label="持续流泪" value="持续流泪"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.结膜右眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
      <span style="width: 20%; display: inline-block"></span>
      <div style="width: 80%; display: inline-block; margin-top: 10px">
        <span>左眼：</span>
        <el-checkbox-group
          v-model="info.结膜左眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox
            label="眼部有脓性分泌物"
            value="眼部有脓性分泌物"
          ></el-checkbox>
          <el-checkbox label="持续流泪" value="持续流泪"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.结膜左眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">眼球：</span>
      <div style="width: 80%; display: inline-block">
        <span>右眼：</span>
        <el-checkbox-group
          v-model="info.眼球右眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox
            label="双眼球大小不一致"
            value="双眼球大小不一致"
          ></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.眼球右眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
      <span style="width: 20%; display: inline-block"></span>
      <div style="width: 80%; display: inline-block; margin-top: 10px">
        <span>左眼：</span>
        <el-checkbox-group
          v-model="info.眼球左眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox
            label="双眼球大小不一致"
            value="双眼球大小不一致"
          ></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.眼球左眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">角膜：</span>
      <div style="width: 80%; display: inline-block">
        <span>右眼：</span>
        <el-checkbox-group
          v-model="info.角膜右眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="混浊" value="混浊"></el-checkbox>
          <el-checkbox label="双侧不对称" value="双侧不对称"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.角膜右眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
      <span style="width: 20%; display: inline-block"></span>
      <div style="width: 80%; display: inline-block; margin-top: 10px">
        <span>左眼：</span>
        <el-checkbox-group
          v-model="info.角膜左眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="混浊" value="混浊"></el-checkbox>
          <el-checkbox label="双侧不对称" value="双侧不对称"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.角膜左眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">瞳孔：</span>
      <div style="width: 80%; display: inline-block">
        <span>右眼：</span>
        <el-checkbox-group
          v-model="info.瞳孔右眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="瞳孔不居中" value="瞳孔不居中"></el-checkbox>
          <el-checkbox label="瞳孔不圆" value="瞳孔不圆"></el-checkbox>
          <el-checkbox
            label="瞳孔双侧不对称"
            value="瞳孔双侧不对称"
          ></el-checkbox>
          <el-checkbox label="瞳孔区发白" value="瞳孔区发白"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.瞳孔右眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
      <span style="width: 20%; display: inline-block"></span>
      <div style="width: 80%; display: inline-block; margin-top: 10px">
        <span>左眼：</span>
        <el-checkbox-group
          v-model="info.瞳孔左眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="瞳孔不居中" value="瞳孔不居中"></el-checkbox>
          <el-checkbox label="瞳孔不圆" value="瞳孔不圆"></el-checkbox>
          <el-checkbox
            label="瞳孔双侧不对称"
            value="瞳孔双侧不对称"
          ></el-checkbox>
          <el-checkbox label="瞳孔区发白" value="瞳孔区发白"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.瞳孔左眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">巩膜：</span>
      <div style="width: 80%; display: inline-block">
        <span>右眼：</span>
        <el-checkbox-group
          v-model="info.巩膜右眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="巩膜黄染" value="巩膜黄染"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.巩膜右眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
      <span style="width: 20%; display: inline-block"></span>
      <div style="width: 80%; display: inline-block; margin-top: 10px">
        <span>左眼：</span>
        <el-checkbox-group
          v-model="info.巩膜左眼"
          style="width: 80%; display: inline-block"
        >
          <el-checkbox label="巩膜黄染" value="巩膜黄染"></el-checkbox>
          <el-checkbox label="其他" value="其他"></el-checkbox>
          <el-input
            placeholder="请输入"
            v-model="info.巩膜左眼其他"
            style="width: 200px; margin-left: 10px"
            size="small"
          >
          </el-input>
        </el-checkbox-group>
      </div>
    </div>
    <p style="font-weight: 900; font-size: 14px; color: #000">
      主要眼病高危因素
    </p>
    <div class="box">
      <span style="width: 20%; display: inline-block"
        >出生时早产或低体重出生：</span
      >
      <el-checkbox-group
        v-model="info.出生时早产或低体重出生"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="出生体重＜2000g的低出生体重儿"
          value="出生体重＜2000g的低出生体重儿"
        ></el-checkbox>
        <el-checkbox
          label="出生孕周＜32周的早产儿"
          value="出生孕周＜32周的早产儿"
        ></el-checkbox>
        <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.出生时早产或低体重出生其他"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block"
        >曾入驻新生儿重症监护病房：</span
      >
      <el-checkbox-group
        v-model="info.曾入驻新生儿重症监护病房"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="曾在重症监护病房住院超过7天并有连续高浓度吸氧史"
          value="曾在重症监护病房住院超过7天并有连续高浓度吸氧史"
        ></el-checkbox>
        <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.曾入驻新生儿重症监护病房其他"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">遗传性眼病家族史：</span>
      <el-checkbox-group
        v-model="info.遗传性眼病家族史"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="有遗传性眼病家族史"
          value="有遗传性眼病家族史"
        ></el-checkbox>
        <el-checkbox
          label="家庭存在眼病相关的综合征"
          value="家庭存在眼病相关的综合征"
        ></el-checkbox>
        <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.遗传性眼病家族史其他"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">母亲孕期宫内感染：</span>
      <el-checkbox-group
        v-model="info.母亲孕期宫内感染"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox
          label="巨细胞病毒感染"
          value="巨细胞病毒感染"
        ></el-checkbox>
        <el-checkbox label="风疹病毒感染" value="风疹病毒感染"></el-checkbox>
        <el-checkbox label="疱疹病毒感染" value="疱疹病毒感染"></el-checkbox>
        <el-checkbox label="梅毒感染" value="梅毒感染"></el-checkbox>
        <el-checkbox label="弓形体感染" value="弓形体感染"></el-checkbox>
        <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.母亲孕期宫内感染其他"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">颅面及颜面畸形：</span>
      <el-checkbox-group
        v-model="info.颅面及颜面畸形"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox label="颅面部畸形" value="颅面部畸形"></el-checkbox>
        <el-checkbox
          label="大面积颜面血管瘤"
          value="大面积颜面血管瘤"
        ></el-checkbox>
        <el-checkbox
          label="哭闹时眼球外凸"
          value="哭闹时眼球外凸"
        ></el-checkbox>
        <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.颅面及颜面畸形其他"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span style="width: 20%; display: inline-block">眼部情况：</span>
      <el-checkbox-group
        v-model="info.眼部情况"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox label="眼部持续流泪" value="眼部持续流泪"></el-checkbox>
        <el-checkbox
          label="眼部有大量分泌物"
          value="眼部有大量分泌物"
        ></el-checkbox>
        <el-checkbox label="其他" value="其他"></el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.眼部情况其他"
          style="width: 200px; margin-left: 10px"
          size="small"
        >
        </el-input>
      </el-checkbox-group>
    </div>
    <p style="font-weight: 900; font-size: 14px; color: #000">其他检查</p>
    <div class="box">
      <span style="width: 20%; display: inline-block">光照反应：</span>
      <el-checkbox-group
        v-model="info.光照反应"
        style="width: 80%; display: inline-block"
      >
        <el-checkbox label="右眼异常" value="右眼异常"></el-checkbox>
        <el-checkbox label="左眼异常" value="左眼异常"></el-checkbox>
      </el-checkbox-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">转诊建议</p>
    <div class="box">
      <span>总体情况：</span>
      <el-tag type="success" size="small" style="margin-left: 15px">无</el-tag>
      <el-tag type="info" size="small" style="margin-left: 15px"
        >眼外观检查异常</el-tag
      >
      <el-tag type="info" size="small" style="margin-left: 15px"
        >存在眼病高危因素</el-tag
      >
      <el-tag type="info" size="small" style="margin-left: 15px"
        >光照反应异常</el-tag
      >
      <el-tag type="danger" size="small" style="margin-left: 15px"
        >光照反应异常</el-tag
      >
      <p style="color: rgb(250, 140, 22); margin-top: 10px">
        温馨提示:如需转诊请在提交本次随访单后，选择“去转诊”创建转诊单，眼外观检查结果、主要眼病高危因素、其他检查将自动同步到转诊单。
      </p>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">健康指导</p>
    <p style="font-weight: 900; font-size: 14px; color: #000">普遍性指导</p>
    <div class="box">
      <p>
        1.新生儿视力发育需要良好的环境亮度，
        白天要保证室内光线明亮，夜间睡眠时应关灯。
      </p>
      <p>2.日常养育照护注意保持眼部清洁卫生。</p>
      <p>3.保证新生儿充足睡眠和营养。</p>
      <p>4.从出生就要有近视防控意识。</p>
      <p>5.定期带新生儿做眼保健。</p>
      <p>6.告知家长注意观察新生儿眼病有无异常，若发现异常及时就医。</p>
    </div>
    <p style="font-weight: 900; font-size: 14px; color: #000">针对性指导</p>
    <div class="box">
      <p>
        1.出生体重＜2000g的低出生体重儿和出生孕周＜32周的早产儿未按要求进行眼底检查者，告知家长应在生后4~6周或矫正胎龄32周,由眼科医师进行首次眼底病变筛查。
      </p>
      <p>2.其他眼病相关危险因素，告知家长新生 儿应尽早接受进一步眼科检查。</p>
      <p>3.其他指导</p>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
        v-model="info.其他指导"
      >
      </el-input>
    </div>
    <div class="box">
      <span>随访照片：</span>
      <el-button
        icon="el-icon-upload2"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >本地上传文件</el-button
      >
      <el-button
        icon="el-icon-picture-outline"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >加载手机图片</el-button
      >
      <p style="margin-top: 10px">
        扫描二维码，在手机端点击"上传"图片，在手机端上传后，点击上方"加载手机照片"按钮，即可同步到电脑端
      </p>
      <div>
        <img
          style="width: 100px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
        <img
          style="width: 100px; margin-left: 20px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
      
      <script>
export default {
  data() {
    return {
      info: {
        眼睑右眼: [],
        眼睑左眼: [],
        结膜右眼: [],
        结膜左眼: [],
        眼球右眼: [],
        眼球左眼: [],
        角膜右眼: [],
        角膜左眼: [],
        瞳孔右眼: [],
        瞳孔左眼: [],
        巩膜右眼: [],
        巩膜左眼: [],
        出生时早产或低体重出生: [],
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
    };
  },
};
</script>
      
      <style scoped lang="scss">
.ybjc {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
</style>